<template>
  <div class="app-container">
    <HKSearchform
      :data="queryParams"
      :field-list="filterInfo.fieldList"
      @handleSearch="handleQuery"
      @handleReset="resetQuery"
      @handleEvent="handleEvent"
    />

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button :disabled="!statusFlag" type="primary" size="mini" @click="handlePackage">选择打包内容</el-button>
      </el-col>
    </el-row>

    <HkTable
      ref="tables"
      :loading="loading"
      :total="total"
      :tableData="tableList"
      :tableColumns="tableFieldList"
      :showIndex="true"
      :operate="true"
      @changePage="getListData">
      <template #status="scope">
        <span :style="(statusDict.find(item => item.key == scope.row.status)).style">
          {{ (statusDict.find(item => item.key == scope.row.status)).label }}
        </span>
      </template>
      <template #updateTime="scope">
        <span>{{ parseTime(scope.row.updateTime) }}</span>
      </template>
      <template #operate="scope">
        <el-button :disabled="!statusFlag" v-if="scope.row.status == '0'" size="mini" type="text" @click="handleDownload(scope.row)">下载</el-button>
      </template>
    </HkTable>

    <!-- 选择打包内容弹窗 -->
    <Package ref="packageDialog" @handleSubmit="handleSubmit" />
  </div>
</template>

<script>
import HKSearchform from '@/components/HKSearchform/index.vue'
import HkTable from '@/components/HKTable'
import { parseTime } from '@/utils/hongke.js'
import { getRegister, getPackageList } from '@/api/system/report'
import Package from './components/package.vue'
import { download } from '@/utils/request'

export default {
  name: 'Download',
  components: { HKSearchform, HkTable, Package },
  data() {
    return {
      //  状态开关：所有操作需基于注册过且不是在线操作
      statusFlag: false,
      // 搜索项配置
      filterInfo: {
        fieldList: [{ label: '关键字', type: 'input', field: 'name' }],
      },
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        name: '',
      },
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      //  表格数据
      tableList: [],
      //  表格配置项
      tableFieldList: [
        { label: '文件名称', param: 'fileName' },
        { label: '文件状态', param: 'status', type: 'slot' },
        { label: '上传时间', param: 'updateTime', type: 'slot' },
      ],
      //  状态字典
      statusDict: [
        { key: 1, label: '生成中', style: 'color: #409EFF' },
        { key: -1, label: '异常', style: 'color: #F56C6C' },
        { key: 0, label: '成功', style: 'color: #67C23A' }
      ]
    }
  },
  mounted() {
    this.getListData()
    this.getRegisterInfo()
  },
  methods: {
    /** 获取注册状态 */
    getRegisterInfo() {
      getRegister().then(res => {
        this.statusFlag = res.id && res.online == '0'
      })
    },
    /** 搜索框绑定事件 */
    handleEvent(obj) {
      this.queryParams[obj.field] = obj.value
    },
    /** 搜索 */
    handleQuery() {
      this.queryParams.current = 1
      this.getListData()
    },
    /** 重置 */
    resetQuery() {
      this.queryParams = {
        current: 1,
        size: 10,
        name: '',
      }
      this.getListData()
    },
    /** 选择打包内容 */
    handlePackage() {
      this.$refs['packageDialog'].open = true
    },
    /** 获取列表 */
    getListData() {
      getPackageList(this.queryParams).then((res) => {
        this.tableList = res.list
        this.total = res.total
        this.loading = false
      })
    },
    /** 离线包下载 */
    handleDownload(row) {
      download('http://192.168.60.117:19730/report-api/package/download/' + row.id, {}, `${row.name || ''}_注册离线包.zip`)
    },
    /** 打包弹窗关闭后 */
    handleSubmit() {
      this.resetQuery()
    }
  },
}
</script>

<style lang="scss" scoped>
button.el-button.el-button--primary.is-disabled,
button.el-button.el-button--primary.is-disabled:active {
  color: #FFFFFF !important;
  background-color: #a5b7f7 !important;
  border-color: #a5b7f7 !important;
}
</style>
